<template>
  <div class="app-container">
    <div>
      <h4 style="text-align: left;">服务详情</h4>
    </div>

    <el-form label-width="120px">
      <el-descriptions class="margin-top" title="居民信息" :column="4" border>

        <el-descriptions-item label="姓名">
          {{queryServiceDetailVo.name}}
        </el-descriptions-item>

        <el-descriptions-item label="身份证号">
          {{queryServiceDetailVo.code}}
        </el-descriptions-item>

        <el-descriptions-item label="性别">
          <span v-if="queryServiceDetailVo.sex == '0'">男</span>
          <span v-if="queryServiceDetailVo.sex == '1'">女</span>
        </el-descriptions-item>

        <el-descriptions-item label="年龄">
          {{queryServiceDetailVo.ago}}
        </el-descriptions-item>

        <el-descriptions-item label="联系电话">
          {{queryServiceDetailVo.phone}}
        </el-descriptions-item>

        <el-descriptions-item label="现 居 地" placeholder="请输入" span="2">
          {{queryServiceDetailVo.addressNow}}
        </el-descriptions-item>

        <el-descriptions-item label="居民标签">
          <el-tag
            v-for="label in queryServiceDetailVo.labelList"
            :key="label.id"
            :value="label.id"
            effect="plain">
            {{ label.name }}
          </el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="家庭成员">
          <el-tag
            v-for="family in queryServiceDetailVo.familyList"
            :key="family.id"
            :value="family.id"
            effect="plain">
            {{ "姓名：" + family.name }} {{ "年龄：" + family.ago}} {{ "性别：" + ((family.sex == 0) ? "女" : "男")}} {{ "关系：" + family.relation}}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>

    <el-form label-width="120px">
      <el-descriptions class="margin-top" title="服务信息" :column="4" border>

        <el-descriptions-item label="服务编号">
          {{queryServiceDetailVo.id}}
        </el-descriptions-item>

        <el-descriptions-item label="服务状态">
          {{queryServiceDetailVo.status}}
        </el-descriptions-item>

        <el-descriptions-item label="服务机构">
          {{queryServiceDetailVo.title}}
        </el-descriptions-item>

        <el-descriptions-item label="服务团队">
          {{queryServiceDetailVo.teamName}}
        </el-descriptions-item>

        <el-descriptions-item label="服务医生">
          {{queryServiceDetailVo.doctorName}}
        </el-descriptions-item>

        <el-descriptions-item label="服务包">
          {{queryServiceDetailVo.pageName}}
        </el-descriptions-item>

        <el-descriptions-item label="服务项目">
          {{queryServiceDetailVo.itemName}}
        </el-descriptions-item>

        <el-descriptions-item label="服务来源">
          <span v-if="queryServiceDetailVo.serviceSource == '0'">居民申请</span>
          <span v-if="queryServiceDetailVo.serviceSource == '1'">机构申请</span>
        </el-descriptions-item>

        <el-descriptions-item label="服务地点">
          <span v-if="queryServiceDetailVo.serviceAddress == '0'">签约人家里</span>
          <span v-if="queryServiceDetailVo.serviceAddress == '1'">机构门诊</span>
        </el-descriptions-item>

        <el-descriptions-item label="预约时间">
          {{queryServiceDetailVo.appointmentTime}}
        </el-descriptions-item>

        <el-descriptions-item label="提交时间" span="2">
          {{queryServiceDetailVo.submitTime}}
        </el-descriptions-item >

        <el-descriptions-item label="服务备注">
          {{queryServiceDetailVo.remarks}}
        </el-descriptions-item>
      </el-descriptions>

      <el-form-item style="">
        <router-link :to="'/service/edit/' + queryServiceDetailVo.id">
          <el-button type="primary" icon="el-icon-edit">编辑服务信息</el-button>
        </router-link>
        <el-button type="success" @click="passAudit">审核通过</el-button>
        <el-button type="danger" @click="">驳回</el-button>
        <el-button @click="back">返 回</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import service from "../../../api/service";

export default {
  data() {
    return {
      queryServiceDetailVo: {},              //表单数据的绑定模型
      saveBtnDisabled: false, //防止表单重复提交

    }
  },
  created(){
    // 获取路由地址里面的参数
    console.log(this.$route);
    if(this.$route.params && this.$route.params.id){
      // 表示: 路由参数里面有值，并且有id这个值，就是进行修改操作
      console.log("进行修改操作")
      this.queryById(this.$route.params.id);

    }

  },
  methods: {
    // 根据ID查询文章
    queryById(id){
      service.queryById(id).then(res => {
        this.queryServiceDetailVo = res.data;
        console.log(this.queryServiceDetailVo);
      });
    },

    //点击添加按钮
    handleAddOrEdit(){

      // 把saveBtnDisabled 改为true  表示这按钮不可以被点击
      this.saveBtnDisabled = true;

      if(this.$route.params && this.$route.params.id){
        // 修改操作
        sign.edit(this.sign).then(res => {
          // 弹出提示信息
          this.$message.success(res.message);
          // 添加完成，需要跳转到列表页面
          this.$router.push({ path: '/sign/pendingSign' })
        });
      }else{
        // 增加操作
        //调用新增方法
        sign.add(this.sign).then(res => {
          // 弹出提示信息
          this.$message.success(res.message);
          // 添加完成，需要跳转到列表页面
          this.$router.push({ path: '/sign/pendingSign' })
        });
      }

      this.saveBtnDisabled = false;

    },
    //点击审核通过
    passAudit(){
      sign.passAudit(this.queryServiceDetailVo).then(res=>{
        this.$router.push({ path: '/sign/pendingSign' });
      });
    },

    back(){
      this.$router.push({ path: '/service/pendingService' });
    },

    /**
     * 图片上传成功之后回调该函数
     * @param res   响应回来的数据,通过该对象可以获得响应数据
     * @param file  上传的图片file
     */
    handleAvatarSuccess(res, file) {
      console.log("上传图片响应回来的数据为:" + res.data);
      //this.sign.image = "http://rj0158yod.hd-bkt.clouddn.com/" + res;
      console.log("this.sign.image = " + this.sign.image);
      this.sign.image = res.data;
    },

    /**
     * 图片上传之前触发该函数，一般用于图片的大小，后缀等信息的校验
     * @param file    上传的图片file
     * @returns {boolean}
     */
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传图片图片只能是 JPG 或 png 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

